<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>客户管理</title>
	<link rel="stylesheet" href="__CSS__/bootstrap/bootstrap.css"/>
	<link rel="stylesheet" href="__CSS__/layout.css"/>
	<link rel="stylesheet" href="__CSS__/elements.css"/>
	<link rel="stylesheet" href="__CSS__/font-awesome.css"/>
	<link rel="stylesheet" href="__CSS__/index.css"/>
	<link rel="stylesheet" href="__CSS__/add.css"/>
</head>
<body>
<!--横向标题-->
<header class="navbar" id="header">
	<div class="container-fluid">
		<div class="logo col-md-5 col-sm-5 col-xs-5">
			<!--<a href="#" class="new-a">bootstrap管理系统</a>-->
		</div>
		<!--移动端按钮-->
		<button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
			<span class="sr-only">Toggle navigation</span>
			<span class="fa fa-bars"></span>
			<span></span>
		</button>
		<ul class="nav navbar-nav header-ul" style="overflow: hidden;">
			<li><a href="#" style="color: white;">首页</a></li>
			<li><a href="#" style="color: white;">库存</a></li>
			<li><a href="#" style="color: white;">采购</a></li>
			<li><a href="#" style="color: white;">营销</a></li>
			<li><a href="#" style="color: white;">OA</a></li>
		</ul>
		<!--横列表右侧-->
		<div class="nav-no-collapse" id="header-nav">
			<ul class="nav navbar-nav pull-right">
				<li class="dropdown profile-dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						<span class="hidden-xs new-a">Arilylove</span> <b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#"><i class="fa fa-user"></i>Profile</a></li>
						<li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
						<li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li>
						<li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
					</ul>
				</li>
				<li class="hidden-xxs">
					<a class="btn" style="color: white;border-bottom: 0;">
						<i class="fa fa-power-off"></i>
					</a>
				</li>
			</ul>
		</div>
		<!--横列表右侧结束-->
	</div>

</header>
<div class="container">
	<div class="row">
		<!--左列表-->
		<div class="col-md-2">
			<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
				<ul class="nav nav-pills nav-stacked" id="menulist">
					<li class="active">
						<a href="index.html">
							<i class="fa fa-dashboard"></i>
							<span>首页</span>
						</a>
					</li>
					<li>
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-users"></i>
							<span>库存</span>
							<i class="fa fa-chevron-circle-down drop-icon"></i>
						</a>
						<ul class="submenu">
							<li>
								<a href="#">
									User list
								</a>
							</li>
							<li>
								<a href="#">
									User profile
								</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="echarts.html">
							<i class="fa fa-table"></i>
							<span>采购</span>
						</a>
					</li>
					<li>
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-users"></i>
							<span>销售</span>
							<i class="fa fa-chevron-circle-down drop-icon"></i>
						</a>
						<ul class="submenu">
							<li>
								<a href="#">
									User list
								</a>
							</li>
							<li>
								<a href="#">
									User profile
								</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-users"></i>
							<span>财务</span>
							<i class="fa fa-chevron-circle-down drop-icon"></i>
						</a>
						<ul class="submenu">
							<li>
								<a href="#">
									User list
								</a>
							</li>
							<li>
								<a href="#">
									User profile
								</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-users"></i>
							<span>人事</span>
							<i class="fa fa-chevron-circle-down drop-icon"></i>
						</a>
						<ul class="submenu">
							<li>
								<a href="#">
									User list
								</a>
							</li>
							<li>
								<a href="#">
									User profile
								</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-users"></i>
							<span>OA</span>
							<i class="fa fa-chevron-circle-down drop-icon"></i>
						</a>
						<ul class="submenu">
							<li>
								<a href="#">
									User list
								</a>
							</li>
							<li>
								<a href="#">
									User profile
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>

		</div>
		<!--中间内容-->
		<div class="col-md-8 col-xs-12">
			<div class="row">
				<div class="main-box">
					<!--<a href="#" onclick="addUser()" class="btn btn-primary" id="foradd">
                        <i class="fa fa-plus-circle fa-lg"></i> 添加
                    </a>-->
					<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static">
						Launch demo modal--类似于弹出框（淡入淡出效果）
					</button>
					<!-- Modal 可以用做弹出框 -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<h4 class="modal-title" id="myModalLabel">Modal title</h4>
								</div>
								<form action="" method="post">
									<div class="modal-body">
										<div class="form-group">
											<label class="control-label">test</label>
											<input type="text" name="test" class="form-control">
										</div>
										<div class="form-group">
											<label class="control-label">test</label>
											<input type="text" name="test" class="form-control">
										</div>
										<div class="form-group">
											<label class="control-label">test</label>
											<input type="text" name="test" class="form-control">
										</div>
										<div class="form-group">
											<label class="control-label">test</label>
											<input type="text" name="test" class="form-control">
										</div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
										<button type="button" class="btn btn-primary">确定</button>
									</div>
								</form>
							</div>
						</div>
					</div>
					<!--Modal end-->

					<div class="filter-block pull-right">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Search...">
							<i class="fa fa-search search-icon"></i>
						</div>
						<!--<a href="#" onclick="index()">列表</a>-->
					</div>
					<div class="table-responsive" style="margin-top:20px;">
						<table class="table table-striped jambo_table bulk_action">
							<thead>
							<tr>
								<th>编号</th>
								<th>1</th>
								<th>2</th>
								<th>3</th>
								<th>4</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td>1</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr>
							<tr>
								<td>2</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr>
							<tr>
								<td>3</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr><tr>
								<td>4</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr>
							<tr>
								<td>5</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr>
							<tr>
								<td>6</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr>
							<tr>
								<td>7</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr>
							<tr>
								<td>8</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr>
							<tr>
								<td>9</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr>
							<tr>
								<td>10</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								<td>操作</td>
							</tr>

							</tbody>
						</table>
					</div>
				</div>
			</div>

		</div>
		<!--右边其他（暂时没有）-->
		<div class="col-md-2 col-xs-12">
			<div class="nav-no-collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">测试</a></li>
					<li><a href="#">测试</a></li>
					<li><a href="#">测试</a></li>
					<li><a href="#">测试</a></li>
					<li><a href="#">测试</a></li>
				</ul>
			</div>
		</div>

		<!--弹出框-->
		<div class="add forhid">
			<form method="post">
				<div id="add">
					<h3>添加</h3>
					<div class="form-group">
						<label class="control-label col-md-3 col-sm-3 col-xs-3">用户1</label>
						<div class="col-md-9 col-sm-9 col-xs-9">
							<input type="text" name="username" class="form-control col-sm-7 col-md-7">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-3 col-sm-3 col-xs-3 add-margin">用户2</label>
						<div class="col-md-9 col-sm-9 col-xs-9">
							<input type="text" name="username" class="form-control col-sm-7 col-md-7 add-margin">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-3 col-sm-3 col-xs-3 add-margin">用户3</label>
						<div class="col-md-9 col-sm-9 col-xs-9">
							<input type="text" name="username" class="form-control col-sm-7 col-md-7 add-margin">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-3 col-sm-3 col-xs-3 add-margin">用户4</label>
						<div class="col-md-9 col-sm-9 col-xs-9">
							<input type="text" name="username" class="form-control col-sm-7 col-md-7 add-margin">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-3 col-sm-3 col-xs-3 add-margin">用户5</label>
						<div class="col-md-9 col-sm-9 col-xs-9">
							<input type="text" name="username" class="form-control col-sm-7 col-md-7 add-margin">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-3 col-sm-3 col-xs-3">用户6</label>
						<div class="col-md-9 col-sm-9 col-xs-9">
							<input type="text" name="username" class="form-control col-sm-7 col-md-7 add-margin">
						</div>
					</div>
					<div class="form-group new-btn">
						<button type="submit" class="btn btn-success">确定</button>
						<button type="button" class="btn btn-danger">取消</button>
					</div>
				</div>
			</form>
		</div>

	</div>

</div>

<script src="__JS__/jquery/jquery.js"></script>
<script src="__JS__/bootstrap/bootstrap.js"></script>

<!--this page-->
<!--<script src="./js/pagenav/jquery.singlePageNav.min.js"></script>-->
<script>

    $('.dropdown-toggle').click(function () {
        //console.log(456)
        $('li').removeClass('active')
        //$(this).parent('li').addClass('active')

    })
    //菜单动态选中 js
    //获取当前地址栏中的链接
    var urlstr = location.href;
    var urlstatus = false;
    var menu_obj = $("#menulist a");
    //遍历所有菜单
    /*menu_obj.each(function () {
        //判断当前菜单是否存在
        if((urlstr + '/').indexOf($(this).attr('href')) > -1 && $(this).attr('href')!='')
        {
            $(this).addClass('active');
            $(this).parent().parent().parent().addClass('active'); //针对有多级菜单选中的样式添加
            urlstatus = true;
        }
        else
        {
            $(this).parent().removeClass('active');
        }
    });*/
    //加载页面默认选中第一个
    /*if(!urlstatus)
    {
        menu_obj.parent().eq(0).addClass('active');
    }*/
    /*table从下往上划出--未实现*/
    $(document).ready(function(){
        $(".main-box").animate({bottom:'250px'}).fadeIn("slow")
    });

    /*弹出框*/
    $('.btn-danger').click(function () {
        $('.add').addClass('forhid')
    })
    function addUser() {
        $('.add').removeClass('forhid')
        console.log(123)

    }
</script>
</body>
</html>